import { Component, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import { useBasicStore } from '@/stores/basic'
import type { JSX } from 'vue/jsx-runtime'
import { Button, Descriptions, DescriptionsItem } from 'ant-design-vue'
import type { EnumDto } from '@/api/types'

export interface DescDto {
    [key: string]: DescItemDto
}

export interface DescItemDto {
    key?: string
    label: string
    value: string | number | boolean | null | JSX.Element
    span?: number
    slot?: () => string | JSX.Element
    callback?: () => void
}

@Component
export class Description extends Render {
    @Prop() renderData!: DescItemDto[]
    @Prop({ default: 3 }) row?: number
    @Prop({ default: 170 }) labelWidth?: number

    @Prop({ default: 'small' }) size?: 'small' | 'middle' | 'default'

    basicStore = useBasicStore()

    getOptionsItem(list: EnumDto[], value: string | number | null) {
        const index = list.findIndex((item) => item.value === value)
        return list[index]?.label || '暂无'
    }
    renderItem(item: DescItemDto) {
        // console.log(item, '每一个的信息')
        return (
            <DescriptionsItem label={item.label} span={item.span}>
                <div class="flex justify-between w-full">
                    <div class="flex w-full">
                        <>{item?.slot ? item.slot() : (item.value ?? '--')}</>
                    </div>
                </div>
            </DescriptionsItem>
        )
    }

    render() {
        return (
            <Descriptions
                bordered
                labelStyle={{
                    width: `${this.labelWidth}px`,
                    color: '#9497B1'
                }}
                size={this.size}
                column={this.row}
            >
                {this.renderData.map((item) => {
                    return this.renderItem(item)
                })}
            </Descriptions>
        )
    }
}

export default toNative<
    { renderData: DescItemDto[]; labelWidth?: number; row?: number; size?: string; style?: string },
    {}
>(Description)
